@import 'src/res/theme/xxhz';

.product-info {
  background-color: #fff;

  .at-input {
    padding-left: 20px;
    margin-left: 0;
  }

  .foot-btn {
    display: flex;
    background-color: #fff;
    left: 0;
    width: 100%;
    z-index: 999;

    .h5-small {
      font-size: 28px;
    }

    .btn {
      padding: 0 30px;
      margin: 30px auto;
      text-align: center;
      line-height: 75px;
      height: 75px;
      background-color: #fff;
      border: 1px solid $mainColor;
      color: $mainColor;
      width: 50%;
      border-radius: 100px;
    }

    .active {
      color: #fff;
      background-color: $mainColor;
    }
  }

  .line-bg {
    background-color: $color-default-background;
    height: 20px;
  }

}

.product-info {

  .use-time {
    font-size: 26px;
    color: #b6b7b8;
  }

  ._check {
    display: inline-block;
    width: 20%;
  }

  .nowrap {
    white-space: pre-wrap;
    padding-right: 0;
  }

  .use-time-wrapper {
    display: flex;
    justify-content: space-between;
  }

  .weekdays {
    line-height: 2;
  }

  .use-time-wrapper, .weight-title, .weekdays {
    padding: 20px 24px;
  }

  .weekdays, .use-time-segmentation, .weight-title {
    font-size: 26px;
  }

  .weight-title {
    font-weight: bold;
  }

  .limit-buy-amount::before {
    right: 40px !important;
    content: '张';
  }

  .appointment_time::before {
    right: 40px !important;
    content: '电话预约';
  }

  .product-form {

    &-block {
      background-color: #fff;
      padding: 0 20px;

      &-item {
        display: flex;
        position: relative;
        padding: 30px 24px;

        &-left {
          margin-right: 16px;
          width: 172px;
          text-align: left;
          font-size: 26px;
        }

        &-right {
          width: calc(100% - 172px - 16px);
          font-size: 26px;
        }
      }
    }
  }

  .mepty {
    color: #b6b7b8;
  }

  .mepty, .value {
    display: inline-block;
  }

  .ret {
    font-size: 30px;
    transform: scaleY(1.6);
    display: inline-block;
    position: relative;
    left: 10px;
    color: #b6b7b8;
    float: right;
  }

  .at-input, .at-list__item {
    padding-left: 24px;
  }

  .at-input__title, .item-content__info-title, .product-images-title, .at-input input {
    font-size: 28px;
  }

  .at-list::after {
    border-top-width: inherit;
  }

  .at-input::after, .at-list::after {
    border-bottom: solid 1Px #f2f2f2 !important;
    width: 100%;
    left: 0;
    top: inherit;
    bottom: 0;
    right: inherit;
    transform: inherit;

  }

  .product-images::after, .border-bottom::after {
    content: '';
    position: absolute;
    transform-origin: center;
    pointer-events: none;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: solid 1px #f2f2f2;
  }

  .border-bottom {
    position: relative;
  }

  .product-images {
    padding: 20px 30px 24px 24px;
    position: relative;

    ._image-border {
      width: 180px;
      height: 180px;
      border: solid 1px #dbdbdb;
      margin-right: 10px;
      position: relative;
      top: 6px;
      display: inline-block;
      border-radius: 10px;

      ._image {
        width: 180px;
        height: 180px;
      }

      ._close {
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, .5);
        color: #fff;
        position: absolute;
        right: 15px;
        top: 15px;
        z-index: 1;
        text-align: center;
        line-height: 40px;
        border-radius: 30px;

        ._font {
          transform: scale(.8, .6);
          display: inline-block;
          position: relative;
          top: -4px;
        }
      }
    }

    .image-border {
      width: 180px;
      height: 180px;
      border: dashed 1px #dbdbdb;
      border-radius: 10px;
      margin-top: 10px;
      position: relative;
      top: 8px;
      display: inline-block;

      .add {
        font-size: 72px;
        font-weight: bold;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #aaa;
      }
    }
  }

  .label-right {
    .at-input__container {
      position: relative;

      .at-input__title {
        position: absolute;
        right: 0;
        text-align: right;
      }
    }
  }
}

.addInfo {
  width: 100%;
  height: 98px;
  line-height: 98px;
  text-align: center;
  color: #fff;
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 0;
}

.h5-small {
  font-size: 28px;
}

.product-images-sub-title {
  font-size: 28px;
  color: #bbb;
  margin-left: 50px;
}

.goods-info-div {
  position: relative;

  .goods-info-content {

  }

  .goods-info-icon {
    font-size: 40px;
    color: #0bbe7f;
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 900;
  }
}

.item-right {
  text-align: right;

  input {
    padding-right: 60px;
  }
}

.product-info .use-rule ._check {
  width: 25% !important;
}

.product-info .use-rule ._check:first-child {
  width: 45% !important;
}

.appointment-unit {
  position: relative;

  .appointment-unit-pick {
    position: absolute;
    width: 44%;
    top: 0px;
    right: 30px;
  }
}

.border-bottom .title {
  width: 100% !important;
}

.at-textarea {
  border: none;
}

.item {
  position: relative;
}

.product-info .rate-top .at-input input {
  margin-top: -40px !important;
}

.product-info-weapp {
  .product-form-block-item {
    padding: 0px 30px !important;
  }

  .at-input__container {
    padding-left: 0 !important;
  }

  .product-form-block-item-right {
    width: 70% !important;
  }

  .product-form-block-item-left {
    flex: 0 0 168px;
  }
}

.placeholderClass {
  font-size: 30px;
  line-height: 1.5;
}

.at-textarea__textarea::placeholder {
  font-size: 30px;
  line-height: 1.5;
}

.product-info {
  background-color: #fcfcfc;
  padding: 30px;

  .at-input,
  .at-textarea,
  .product-info .at-list__item {
    background-color: #fafafa;
  }

  .at-textarea .at-textarea__textarea {
    background-color: #f5f5f5 !important;
    padding: 12px;
    width: 95%;
  }

  .product-info-form {
    background-color: #fafafa;
    box-shadow: 0PX 0PX 5PX 0PX rgba(0, 0, 0, 0.12);
    padding: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;

    .item-trips {
      .weight-title {
        display: inline-block;
        width: 20%;
        vertical-align: top;
      }
    }

    .trips {
      width: 55%;
      margin-left: 30px;
      display: inline-block;
      padding: 12px 0;

      .trips-item {
        display: flex;
        justify-content: space-between;
        font-size: 28px;
        margin-bottom: 20px;

        .trips-number {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .trips-number-left {
          margin-right: 16px;
        }

        .trips-number-right {
          margin-left: 16px;
        }
      }

      .last {
        margin-bottom: 0;
      }
    }

    .proportion-after {
      position: relative;
    }

    .proportion-after::before {
      position: absolute;
      right: 40px;
      top: 45%;
      transform: translate(0, -50%);
      content: '元';
      color: $mainColor;
      font-size: 28px;
    }

    .proportion-after .at-input__input {
      margin-right: 40px !important;
    }

    .mepty-color {
      color: $mainColor !important;
    }
  }

  .at-input__title, .product-form-block-item-left {
    font-weight: bold !important;
    font-size: 0.55467rem !important;
  }

  .parade-date {
    width: 60% !important;
  }

  .parade-date-back {
    width: 35% !important;
    position: absolute;
    top: 0;
    right: 0;

    .product-form-block-item-right {
      width: 100%;
    }
  }

  .parade-line {
    position: absolute;
    top: 10%;
    left: 55%;
  }

  .linform-logo {
    height: 30%;
    text-align: center;
    margin: 60px 0 0;

    .taro-img__mode-scaletofill {
      width: 80%;
    }
  }

  .foot-btn {
    .btn {
      width: 100%;
    }
  }
}

.product-info-weapp {
  .product-form-block-item-left {
    font-size: 26px !important;
  }

  .parade-date {
    .product-form-block-item {
      padding-left: 20px !important;
      height: 88px;
      line-height: 88px;
    }

    .product-form-block-item-left {
      height: 88px;
      line-height: 88px;
    }
  }

  .parade-date-back .product-form-block-item-right {
    width: 100% !important;
  }

  .parade-line {
    top: 20% !important;
  }

  .lineform-image {
    display: flex;
    margin-top: 40px;
    justify-content: center;

    .linform-logo {
      width: 80%;
      height: 0;
      text-align: center;
      margin: 0;
    }
  }

  .product-info-form {
    .trips {
      padding-top: 18px !important;
    }

    .trips-item {
      margin-bottom: 40px;
      height: 70px;
      align-items: flex-start;

      .trips-number-left {
        margin-right: 16px;
      }

      .trips-number-right {
        margin-left: 16px;
      }
    }
  }
}

.product-info-weapp.product-info .at-input__title, .product-info-weapp.product-info .product-form-block-item-left {
  font-size: 26px !important;
}

.lineform-image {
  display: flex;
  justify-content: center;
}

.require::before,
.require-item::before,
.require-item-one::before {
  content: '*';
  color: #f00;
  font-size: 28px;
  display: inline-block;
  position: absolute;
  top: 30px;
  left: 4px;
}

.require-item::before {
  z-index: 99;
}

.require-item-one::before {
  top: 22px !important;
}
